<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>

    <u--form :model="model1" :rules="rules" ref="uForm" class="form-view">
      <u-form-item @click="to('financeAccountBankList')" label="开户行" labelWidth="60" prop="model1.bankName" borderBottom>
        <view>{{ model1.bankName }}</view>
      </u-form-item>
      <u-form-item label="卡号" labelWidth="50" prop="model1.account" borderBottom v-if="page_source=='cgd'">
        <u--input v-model="model1.account" border="none"></u--input>
      </u-form-item>
	  <u-form-item label="账户" labelWidth="50" prop="model1.account" borderBottom v-else>
	    <u--input v-model="model1.account" border="none"></u--input>
	  </u-form-item>
      <u-form-item label="开户人" labelWidth="60" prop="model1.holder" borderBottom>
        <u--input v-model="model1.holder" border="none"></u--input>
      </u-form-item>
		<u-form-item label="简称" labelWidth="60" prop="model1.holder" borderBottom v-if="page_source=='cgd'">
		  <u--input v-model="model1.holder" border="none"></u--input>
		</u-form-item>
      <u-form-item label="存款" labelWidth="50" prop="model1.originAmount" borderBottom>
        <u--input v-model="model1.originAmount" border="none"></u--input>
      </u-form-item>
      <u-form-item label="门店"  @click="shopNamePage()" labelWidth="50" prop="model1.shopName" borderBottom>
        <view>{{ model1.shopName }}</view>
      </u-form-item>
      
		<template v-if="page_source!=='cgd'">
			<u-form-item label="启用" labelWidth="50" prop="model1.isEnable" borderBottom>
			  <u-switch v-model="model1.isEnable"></u-switch>
			</u-form-item>
			<u-form-item label="现金" labelWidth="50" prop="model1.isCorporate" borderBottom>
			  <u-switch v-model="model1.isCorporate"></u-switch>
			</u-form-item>
			<u-form-item label="公户" labelWidth="50" prop="model1.isCash" borderBottom>
			  <u-switch v-model="model1.isCash"></u-switch>
			</u-form-item>
			<u-form-item label="默认" labelWidth="50" prop="model1.isDefault" borderBottom>
			  <u-switch v-model="model1.isDefault"></u-switch>
			</u-form-item>
		</template>
      
      <u-form-item label="备注" labelWidth="50" prop="userInfo.remarks" borderBottom ref="item1">
        <u--input v-model="model1.remarks" border="none"></u--input>
      </u-form-item>
    </u--form>
	<view class="fixed-btn flex">
	  <u-button
	    text="银行卡识别"
	    type="primary"
	    class="card-btn"
	    shape="circle"
	    color="#ddf0ff"
	    border="none"
	  ></u-button>
	  <u-button
	    text="保存"
	    type="primary"
	    class="save-btn"
	    shape="circle"
	    color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
	    @click="save"
	  ></u-button>
	</view>
    <!-- <u-button type="primary" text="保存" @click="save" customStyle="margin-top: 10px"></u-button> -->
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import { addOrUpdateData ,getDataById} from "@/apis/bill/information/account";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      config: {
        title: "账户",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
      },

      model1: {
        "isEnable": true, // 启用
        "isCorporate": true, // 现金
        "isCash": true, // 公户
        "isDefault": true, // 默认

        "bankId": "", // 开户行 JH
        "bankName": "", // 开户行 建行
        "account": "", // 账户
        "holder": "", // 开户人
        "originAmount": "", // 初始账户金额
        "shopId": "", //门店ID
        "shopName": "",//门店name
        "remarks": "",//备注
      },
      rules: {
        "bankName": {
          type: "string",
          required: true,
          message: "请选择开户行",
          trigger: ["blur", "change"],
        },
      },
      radio: "",
      switchVal: false,
	  
	  // 页面来源
	  page_source: ''
    };
  },
  onLoad(opt) {
	  this.page_source = opt.source||''
    uni.$on('selectedBank', data => {
      this.model1.bankId = data.value
      this.model1.bankName = data.label
      this.$off('selectedBank')
    })
    uni.$on('on-selected-shop', data => {
      this.model1.shopId = data.value
      this.model1.shopName = data.label
      this.$off('on-selected-shop')
    })
    if(this.$Route.query.id){
      this.initData(this.$Route.query.id)
    }
  },
  methods: {
    initData(id) {
      // 1. 查询列表信息
      getDataById(id).then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.model1 = data
      });
    },
    shopNamePage() {
        this.$Router.push({
          name: "SelectShop"
        })
      },
    save(){
      // 1. 新增列表信息
      addOrUpdateData(this.model1).then((res) => {
        if (!res.flag) return;
        uni.showLoading({
					title: res.title
				})
        this.$Router.back()
      });
    },
    to(url) {
      if (!url) return;
      // console.log(url);
      this.$Router.push({
        name: url,
      });
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
      }
    },
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss">
	.form-view {
		background: #fff;
		.u-form-item {
			padding: 0 20rpx;
		}
		
	}
</style>
